<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
    <link rel="stylesheet" href="styles/main.css" />
    <!-- vue: "^2.6.12"    ant-design-vue: "^1.7.2", -->
    <link rel="stylesheet" href="styles/iconfont/iconfont.css" />
    <link rel="stylesheet" href="styles/antd.css" />
    <script src="js-tool/vue.js"></script>
    <script src="js-tool/antd.js"></script>
  </head>

  <body>
    <div id="plc-table">
      <!-- <template>
        <a-table :columns="columns" :data-source="data" bordered>
          <template
            v-for="col in ['name', 'age', 'address']"
            :slot="col"
            slot-scope="text, record, index"
          >
            <div :key="col">
              <template v-if="record.key === editingKey">
                <a-input
                  style="margin: -5px 0"
                  :value="text"
                  @change="e => handleChange(e.target.value, record.key, col)"
                />
              </template>
              <template v-else> {{ text }} </template>
            </div>
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <div class="editable-row-operations">
              <span v-if="record.key === editingKey">
                <a @click="() => save(record.key)">Save</a>
                <a-popconfirm
                  title="Sure to cancel?"
                  @confirm="() => cancel(record.key)"
                >
                  <a>Cancel</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a
                  :disabled="editingKey !== ''"
                  @click="() => edit(record.key)"
                >
                  <i class="icon-renjijiaohu"></i> Edit</a
                >
              </span>
            </div>
          </template>
        </a-table>
      </template> -->
    </div>
  </body>
  <script>
    const mc = require("./melsec_1E.js");
    const conn1 = new mc({
      host: "192.168.30.1",
      port: 6200,
      IOBase:8,
      logLevel: -1
    });

    conn1.connect();

    // const remote = require('electron').remote;
    // const BrowserWindow = remote.BrowserWindow;
    // var win2 = new BrowserWindow({ width: 800, height: 600, show: false });
    // win2.on('closed', function () {
    //     win2 = null;
    // });

    // win2.loadFile('views/edit.html');
    // win2.show()

    // const Menu = remote.Menu;
    // const MenuItem = remote.MenuItem;

    // var menu = new Menu();
    // menu.append(new MenuItem({ label: '点我', click: function () { console.log('item 1 clicked'); } }));
    // menu.append(new MenuItem({ type: 'separator' }));
    // menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));

    // window.addEventListener('contextmenu', function (e) {
    //     e.preventDefault();
    //     menu.popup(remote.getCurrentWindow());
    // }, false);

    // const db = require('./js-tool/msdb.js')

    // db.selectAll('dbo.plc', (err, data) => {
    //     if (err) { console.log(err) }

    //     console.dir(data)

    //     new Vue({
    //         el: '#plc-table',
    //         data() {
    //             return {
    //                 data: data.recordset,
    //                 columns: [
    //                     {
    //                         title: 'id',
    //                         dataIndex: 'plcid',
    //                     },
    //                     {
    //                         title: 'Age',
    //                         dataIndex: 'remark',
    //                     },
    //                     {
    //                         title: 'LineName',
    //                         dataIndex: 'LineName',
    //                     },
    //                     {
    //                         title: 'dbname',
    //                         dataIndex: 'dbname',
    //                     },
    //                     {
    //                         title: 'dtime',
    //                         dataIndex: 'dtime',
    //                     }
    //                 ]
    //             }
    //         }
    //     })
    // })
  </script>
  <!-- <script>
    const columns = [
      {
        title: "name",
        dataIndex: "name",
        width: "25%",
        scopedSlots: { customRender: "name" },
      },
      {
        title: "age",
        dataIndex: "age",
        width: "15%",
        scopedSlots: { customRender: "age" },
      },
      {
        title: "address",
        dataIndex: "address",
        width: "40%",
        scopedSlots: { customRender: "address" },
      },
      {
        title: "operation",
        dataIndex: "operation",
        scopedSlots: { customRender: "operation" },
      },
    ];

    const data = [];
    for (let i = 0; i < 20; i++) {
      data.push({
        key: i.toString(),
        name: `Edrward ${i}`,
        age: 32,
        address: `London Park no. ${i}`,
      });
    }
    new Vue({
      el: "#plc-table",
      data() {
        return {
          data,
          columns,
          editingKey: "",
        };
      },
      methods: {
        handleChange(value, key, column) {
          console.log(value, key, column);
        },
        edit(key) {
          this.editingKey = key;
          const newData = [...this.data];
          const target = newData.filter((item) => key === item.key)[0];
          if (target) {
            console.log(target);
          }
        },
        save(key) {
          this.editingKey = "";
          debugger;
        },
        cancel(key) {
          this.editingKey = "";
        },
      },
    });
  </script> -->

  <!-- <script>
    //PLC读写,特别是写入操作,请确保安全后测试


    // PLC 标签与地址表
    var variables = {
      TEST1: "MR4", // Memory real at MD4
      TEST2: "M32.2", // Bit at M32.2
      TEST3: "M20.0", // Bit at M20.0
      TEST4: "DB1,REAL0.20", // Array of 20 values in DB1
      TEST5: "DB1,REAL4", // Single real value
      TEST6: "DB1,REAL8", // Another single real value
      TEST7: "DB1,INT12.2", // Two integer value array
      TEST8: "DB1,LREAL4", // Single 8-byte real value
    };

    // 初始化，西门子默认端口102,IP地址，机架，插槽slot 1  1200/1500 系列, slot 2 for 300/400 系列
    //localTSAP: 0x0100, remoteTSAP: 0x0200, timeout: 8000
    // local and remote TSAP can also be directly specified instead.  timeout 设置 TCP 连接超时时间为8s.
    conn.initiateConnection(
      { port: 102, host: "192.168.0.2", rack: 0, slot: 1 },
      connected
    );

    function connected(err) {
      if (typeof err !== "undefined") {
        // We have an error.  Maybe the PLC is not reachable.  如果有错误，意味着连接失败
        console.log(err);
      }

      conn.setTranslationCB(function (tag) {
        return variables[tag];
      });
      // 把标签TEST1转换为对应PLC地址
      // This sets the "translation" to allow us to work with object names

      conn.addItems(["TEST1", "TEST4"]); //开始导入需要读写的PLC标签与对应地址 数组
      conn.addItems("TEST6"); //单个导入也行
      //	conn.removeItems(['TEST2', 'TEST3']);  // 移除两个PLC标签

      conn.readAllItems(valuesReady); //读取所有conn.addItems 已添加的标签的值 valuesReady为操作完成的回调函数
      //读取所有已导入标签的值

      conn.writeItems("TEST7", [666, 777], valuesWritten);
      // You can write a single array item too. 标签对应"DB1,INT12.2",  Two integer value array,可以数组写入2个int值
      //	conn.writeItems(['TEST5', 'TEST6'], [ 867.5309, 9 ], valuesWritten);  // 数组形式分别写入 valuesWritten为操作完成的回调函数
    }
  </script> -->
</html>
